<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图片拖拽</title>
  <link rel="stylesheet" href="../css/picDrag.css">
</head>
<body>
  <ul class="ul">
    <li class="drop"></li>
    <li class="drag" draggable="true" data-index="0">
      <img src="" alt="1" draggable="false" />
      <p>1</p>
    </li>
    <li class="drop"></li>
    <li class="drag" draggable="true" data-index="1">
      <img src="" alt="2" draggable="false" />
      <p>2</p>
    </li>
    <li class="drop"></li>
    <li class="drag" draggable="true" data-index="2">
      <img src="" alt="3" draggable="false" />
      <p>3</p>
    </li>
    <li class="drop"></li>
    <li class="drag" draggable="true" data-index="3">
      <img src="" alt="4" draggable="false" />
      <p>4</p>
    </li>
    <li class="drop"></li>
  </ul>
  <button type="button" class="btn">提交</button>
  <script src="../js/picDrag.js"></script>
</body>
</html>